<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">异常处理添加</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="异常编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.exceptionNumber" placeholder="请输入设备名称"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生时间" prop="occurrenceTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.occurrenceTime"
                type="date"
                required
                placeholder="请选择发生时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.equipment_name" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.equipment_number" placeholder="请输入前置工序"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="温度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.temperature" placeholder="请输入温度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="压力" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.pressure" placeholder="请输入压力" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="过滤速度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.filtrationSpeed" placeholder="请输入过滤速度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="洗糟水用量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.waterUsage" placeholder="请输入洗糟水用量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="洗糟次数" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.frequency" placeholder="请输入洗糟次数" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="工艺时间" prop="ProcessTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.processTime"
                type="date"
                required
                placeholder="请选择工艺时间"
                style="width: 100%;"

              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="麦芽汁的澄清度" style="margin-bottom: 20px;">
              <el-input v-model="formData.clarityWort" placeholder="请输入麦芽汁的澄清度"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="热凝固物去除效果" style="margin-bottom: 20px;">
              <el-input v-model="formData.thermalCondensates" placeholder="请输入热凝固物去除效果"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="冷凝固物去除效果" style="margin-bottom: 20px;">
              <el-input v-model="formData.condensation" placeholder="请输入冷凝固物去除效果"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发酵液的浊度" style="margin-bottom: 20px;">
              <el-input v-model="formData.fermentTurbidity" placeholder="请输入发酵液的浊度"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="啤酒的微生物指标" style="margin-bottom: 20px;">
              <el-input v-model="formData.Microbiologicalindicators" placeholder="请输入啤酒的微生物指标"  />
            </el-form-item>
          </el-col>
        <el-col :span="8">
            <el-form-item label="原因判断" style="margin-bottom: 20px;">
              <el-input v-model="formData.cause" placeholder="请输入原因判断" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="过滤时间" prop="filterTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.filterTime"
                type="date"
                required
                placeholder="请选择过滤时间"
                style="width: 100%;"
                
              ></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" style="margin-bottom: 20px;">
                <el-input v-model="formData.state" placeholder="请输入状态"  />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应急措施" style="margin-bottom: 20px;">
                <el-input v-model="formData.emergencyMeasures" placeholder="请输入应急措施" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理人员" style="margin-bottom: 20px;">
                <el-input v-model="formData.handlers" placeholder="请输入处理人员" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用工具 / 备件" style="margin-bottom: 20px;">
                <el-input v-model="formData.spareParts" placeholder="请输入使用工具 / 备件" type="textarea"  />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  //流量传感器
const workOrderTypeOptions5 = ref([
  { value: '稳定流量', label: '稳定流量' },
  { value: '动态流量', label: '动态流量' },
  { value: '流量异常报警', label: '流量异常报警' },
  { value: '设备故障报警', label: '设备故障报警' },
  { value: '休眠状态', label: '休眠状态' },
]);
//微生物检测
const workOrderTypeOptions6 = ref([
  { value: '通过', label: '通过' },
  { value: '未通过', label: '未通过' },
  { value: '待审核', label: '待审核' },
  { value: '审核中', label: '审核中' },
]);
// 表单验证规则
const rules = {
  occurrenceTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
  equipment_name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  temperature: [
    { required: true, message: '请输入温度值' },
    { type: 'number', min: 0, max: 200, message: '温度范围 0-200℃' }
  ],
  // 其他字段验证规则...
};
  // 主表单数据
  const formData = reactive({
    "exceptionNumber": "",
    "occurrenceTime": "",
    "equipment_name": "",
    "equipment_number": "",
    "temperature": '',
    "pressure": '',
    "filtrationSpeed": '',
    "waterUsage":'',
    "frequency": '',
    "processTime": "",
    "clarityWort": "",
    "thermalCondensates": "",
    "condensation": "",
    "fermentTurbidity": "",
    "microbiologicalindicators": "",
    "cause": "",
    "filterTime": "",
    "state": "",
    "emergencyMeasures": "",
    "handlers": "",
    "spareParts": "",
    "isDel": true
  });
  
  // 主表单验证规则

  
  // 明细数据列表
  const planDetailsList = ref([]);
  const attachments = ref([]);
  
  // 保存主表单
  const addjihau = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        axios.post('https://localhost:7229/api/Abnormal/AddAbnormal', formData)
          .then(response => {
            if (response.data.code === 200) {
              ElMessage.success('异常处理保存成功');
              console.log(response.data.data);
              router.push("/GetAbnormal");
            } else {
              ElMessage.error(`异常处理表保存失败：${response.data.message}`);
            }
          });
      } else {
        ElMessage.error('请检查表单输入是否正确');
        return false;
      }
    });
  };
  
  
    </script>
    
    <style lang="scss" scoped>
    .exception-container {
      padding: 20px;
      background: #f8f9fa;
      min-height: 100vh;
    
      .action-bar {
        margin-bottom: 20px;
        text-align: right;
        
        .save-btn {
          padding: 12px 28px;
          border-radius: 8px;
          font-size: 16px;
          box-shadow: 0 2px 12px rgba(24, 144, 255, 0.3);
        }
      }
    
      .form-wrapper {
        background: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    
        .form-title {
          color: #2c3e50;
          font-size: 24px;
          margin-bottom: 30px;
          display: flex;
          align-items: center;
          gap: 10px;
          
          .iconfont {
            color: #409eff;
            font-size: 28px;
          }
        }
    
        .form-section {
          margin-bottom: 30px;
          padding: 20px;
          border-radius: 8px;
          background: #f8fafc;
          transition: all 0.3s;
    
          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          }
    
          .section-title {
            color: #606266;
            font-size: 16px;
            margin-bottom: 20px;
            padding-left: 8px;
            border-left: 4px solid #409eff;
          }
        }
    
        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #606266;
          padding-bottom: 8px;
        }
    
        :deep(.el-input__inner) {
          border-radius: 6px;
          transition: all 0.3s;
    
          &:hover {
            border-color: #409eff;
          }
    
          &:focus {
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
    }
    </style>